<!-- *****对抗演练*****-->
<template>
  <div id="drillList">
    <Card class="item" v-for="(item, index) in data" dis-hover :key="index">
      <div class="item-fist-line">
        <h4 class="line-left display-flex">
          <span class="no">{{ index + 1 }}、名称：</span>
          <template v-if="item.name">
            <Tooltip :max-width="400" :content="item.name" placement="top-start">
              <a
                class="course-name text-ellipsis"
                @click="toDetailPage(item)"
                style="width: 260px;"
                >{{ item.name }}</a
              >
            </Tooltip>
          </template>
          <template v-else>
            <span style="width: 260px;" class="text-ellipsis"></span>
          </template>
        </h4>
        <div class="line-right">
          <div class="extra-info">
            <div
              class="extra-item ml20"
              v-if="item.endTime && item.deployStatus == 3 && item.progress == 4 && needTip"
            >
              <Tooltip :max-width="220" transfer class="my-tooltip">
                <Icon type="md-alert" size="20" style="color:#f00;" />
                <div slot="content">您的环境将于<Time :time="destoryTime(item)" type="datetime"/>时自动回收，若仍需保留，请在回收前重新开始</div>
              </Tooltip>
              <!-- <span class="key">即将销毁：</span><CountDown :endTime="destoryTime(item)"></CountDown> -->
            </div>
            <!-- 在页面上占据位置但不展示，不然会影响结构样式 -->
            <div v-else class="ml20" style="width: 22px;">
              <Icon type="md-alert" size="20" style="visibility: hidden;" />
            </div>
            <div class="extra-item ml20">
              <span class="key"
                >{{ [1, 2, 8, 9].includes(item.type) ? '竞赛' : '演练' }}进度：</span
              >
              <Tag
                type="border"
                class="value"
                :color="item.progress | progressFilter('color')"
                style="width:80px;text-align:center"
                >{{ item.progress | progressFilter('text') }}</Tag
              >
            </div>
            <div class="extra-item ml20" v-if="[0, 2, 7].includes(item.type) && $store.state.common.showDistributed">
              <span class="key">是否为分布式：</span>
              <Tag
                type="border"
                class="value"
                :color="
                  item.extension && JSON.parse(item.extension).isDistributed == 1
                    ? '#06b649'
                    : '#ff4242'
                "
                style="width:60px;text-align:center"
                >{{
                  item.extension && JSON.parse(item.extension).isDistributed == 1 ? '是' : '否'
                }}</Tag
              >
            </div>
            <div class="extra-item ml20">
              <span class="key">工程部署状态：</span>
              <Tag
                type="border"
                class="value"
                :color="item | deployStatusFilter('color')"
                style="width:100px;text-align:center"
                >{{ item | deployStatusFilter('text') }}</Tag
              >
              <Poptip trigger="hover" width="300" word-wrap>
                <Icon
                  v-if="item.errorMessage"
                  type="ios-help-circle"
                  color="rgb(203, 2, 54)"
                  style="cursor:'pointer'"
                />
                <div slot="content">
                  <div v-html="item.errorMessage"></div>
                </div>
              </Poptip>
            </div>
            <div class="extra-item ml20" v-if="hasFile">
              <span class="key">归档状态：</span>
              <Tag type="border" class="value" :color="item.filingStatus ? '#06b649' : '#888'">{{
                item.filingStatus ? '已归档' : '未归档'
              }}</Tag>
            </div>
          </div>
          <div class="action">
            <template v-if="[1, 2, 4, 5, 8, 9].includes(item.type)">
              <Button
                type="text"
                v-if="!item.projectId"
                class="pd0 ml20"
                title="快速构建"
                @click="quickCreate(item)"
                :disabled="setBtnStatus(item)"
              >
                <Icon
                  type="md-options"
                  size="24"
                  :style="{ color: setBtnStatus(item) ? '#8f90a6' : 'rgb(56 , 56, 211)' }"
                  >快速构建</Icon
                >
              </Button>
              <Button
                v-if="item.projectId"
                class="pd0 ml20"
                :title="available(item) ? '再次部署' : '重新构建'"
                :disabled="
                  !(
                    [0, 6, 10].includes(item.deployStatus) ||
                    isRemove(item) ||
                    partialDeploymentIsError(item)
                  ) ||
                    setBtnStatus(item) ||
                    (JSON.parse(item.extension).isDistributed == 1 &&
                      JSON.parse(item.extension).isMainRange == 0)
                "
                @click="$parent.isreconstruction(item)"
                type="text"
              >
                <Icon
                  type="md-options"
                  size="24"
                  :style="{
                    color:
                      !(
                        [0, 6, 10].includes(item.deployStatus) ||
                        isRemove(item) ||
                        partialDeploymentIsError(item)
                      ) ||
                      setBtnStatus(item) ||
                      (JSON.parse(item.extension).isDistributed == 1 &&
                        JSON.parse(item.extension).isMainRange == 0)
                        ? '#8f90a6'
                        : 'rgb(56 , 56, 211)'
                  }"
                  >available(item) ? '再次部署' : '重新构建'</Icon
                >
              </Button>
            </template>
            <Button
              type="text"
              @click="modifyItem(item)"
              title="修改"
              class="pd0 ml20"
              :disabled="
                setBtnStatus(item, 'modify') ||
                  (JSON.parse(item.extension).isDistributed == 1 &&
                    JSON.parse(item.extension).isMainRange == 0)
              "
            >
              <img
                src="../../../assets/project/modifys.png"
                alt=""
                v-if="
                  setBtnStatus(item, 'modify') ||
                    (JSON.parse(item.extension).isDistributed == 1 &&
                      JSON.parse(item.extension).isMainRange == 0)
                "
              />
              <img src="../../../assets/project/modifys-h.png" alt="" v-else />
            </Button>
            <Button
              type="text"
              :disabled="
                setBtnStatus(item, 'delete') ||
                  (JSON.parse(item.extension).isDistributed == 1 &&
                    JSON.parse(item.extension).isMainRange == 0)
              "
              title="删除"
              class="pd0 ml20 noStyle"
              @click="deleteItem(item)"
            >
              <img
                src="../../../assets/project/delNote-d.png"
                alt=""
                v-if="
                  setBtnStatus(item, 'delete') ||
                    (JSON.parse(item.extension).isDistributed == 1 &&
                      JSON.parse(item.extension).isMainRange == 0)
                "
              />
              <img src="../../../assets/project/delNote-h.png" alt="" v-else />
            </Button>
            <!-- 对抗，渗透，综合 -->
            <Button
              v-if="[0, 4, 7, 10].includes(item.type)"
              :disabled="
                !(item.progress === 4 && item.deployStatus === 3) ||
                  (item.extension && JSON.parse(item.extension).isDistributed == 1)
              "
              type="text"
              title="存为场景模板"
              class="pd0 ml20 noStyle"
              @click="$parent.openSceneTemplateModal(item.id)"
            >
              <Icon
                type="md-checkbox-outline"
                size="26"
                :style="{
                  color:
                    item.progress === 4 && item.deployStatus === 3
                      ? 'rgb(56 , 56, 211)'
                      : '#8f90a6',
                  cursor: 'pointer'
                }"
              />
            </Button>
            <template v-if="hasFile">
              <template
                v-if="
                  !item.filingStatus &&
                    item.progress == 4 &&
                    !setBtnStatus(item) &&
                    JSON.parse(item.extension).isMainRange != 0
                "
              >
                <Poptip confirm title="确定归档?" @on-ok="$parent.filingAll(item)" transfer>
                  <Button
                    type="text"
                    title="归档"
                    class="pd0 ml20 noStyle"
                  >
                    <Icon
                      type="md-copy"
                      size="26"
                      style="color:rgb(56 , 56, 211);cursor:pointer;"
                    ></Icon>
                  </Button>
                </Poptip>
              </template>
              <template v-else>
                <Button
                  type="text"
                  class="pd0 ml20 noStyle"
                  disabled
                  title="归档"
                >
                  <Icon type="md-copy" size="26" style="color:#8f90a6;cursor:pointer;"></Icon>
                </Button>
              </template>
            </template>
          </div>
        </div>
      </div>
      <div class="item-infos">
        <div class="info">
          <span class="key">工程名称：</span>
          <template v-if="item.projectName">
            <Tooltip :max-width="400" :content="item.projectName" placement="top-start">
              <span class="value" style="width:100px;">
                <p class="showContent" @click="gotoTopo(item)" style="max-width:100px;">
                  <a class="course-name">{{ item.projectName }}</a>
                </p>
              </span>
            </Tooltip>
          </template>
          <template v-else>
            <span style="width: 100px;" class="text-ellipsis"></span>
          </template>
        </div>
        <div class="info">
          <span class="key">设计者：</span>
          <template v-if="item.creatorName">
            <Tooltip :max-width="400" :content="item.creatorName" placement="top-start">
              <span class="value" style="width:100px;">
                <p class="showContent" style="max-width:105px;">{{ item.creatorName }}</p>
              </span>
            </Tooltip>
          </template>
          <template v-else>
            <span style="width: 100px;" class="text-ellipsis"></span>
          </template>
        </div>
        <div class="info" v-if="item.type == 2">
          <span class="key">竞赛模式：</span>
          <span class="value">{{
            item.extension && JSON.parse(item.extension).onlineMode == 1 ? '线上' : '线下'
          }}</span>
        </div>
        <div class="info" v-if="item.type == 4 || item.type == 7">
          <span class="key">答题模式：</span>
          <span class="value">{{
            item.extension && JSON.parse(item.extension).stMode == 1 ? '随意答题' : '顺序答题'
          }}</span>
        </div>
        <div class="info">
          <span class="key">开始时间：</span>
          <span class="value" style="width:135px;">{{ item.startTime }}</span>
        </div>
        <div class="info">
          <span class="key">结束时间：</span>
          <span class="value" style="width:135px;">{{ item.endTime }}</span>
        </div>
        <div class="info">
          <span class="key">创建时间：</span>
          <span class="value" style="width:135px;">{{ item.createTime }}</span>
        </div>
        <div class="info" v-if="item.type == 1 || item.type == 0 || item.type == 8">
          <span class="key">周期：</span>
          <span class="value" style="width:80px;"
            >{{ item.extension && JSON.parse(item.extension).cycleTime }}（分钟）</span
          >
        </div>
        <div class="info" v-if="item.type == 1 || item.type == 0 || item.type == 8">
          <span class="key">周期个数：</span>
          <span class="value" style="width:50px;">{{ item.cycleNum }}</span>
        </div>
        <div class="info" v-if="item.type == 1 || item.type == 8">
          <span class="key">{{ item.type == 8 ? '周期异常扣分' : '周期分数' }}：</span>
          <span class="value" style="width:50px;">{{
            item.extension && JSON.parse(item.extension).cycleScore
          }}</span>
        </div>
        <div class="info" v-if="item.type == 8">
          <span class="key">基础分数：</span>
          <span class="value" style="width:50px;">{{
            item.extension && JSON.parse(item.extension).basicScore
          }}</span>
        </div>
        <div class="info" v-if="item.type == 8">
          <span class="key">允许重置次数：</span>
          <span class="value" style="width:50px;">{{
            item.extension && JSON.parse(item.extension).enResetNum
          }}</span>
        </div>
        <div class="info" v-if="item.type == 8">
          <span class="key">超过次数重置扣分：</span>
          <span class="value" style="width:50px;">{{
            item.extension && JSON.parse(item.extension).resetLostScore
          }}</span>
        </div>
      </div>
    </Card>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import destroyEnv from '@/mixin/destroyEnvironmentMixin';
import CountDown from '@/components/count-down';
export default {
  name: 'courseList',
  props: ['data', 'btnStatus'],
  data() {
    return {
      currentItem: {}
    };
  },
  components: {
    CountDown
  },
  mixins: [destroyEnv],
  watch: {},
  filters: {
    deployStatusFilter(item, type) {
      let val = item.isBatchDeployment ? item.quickCreateStatus : item.deployStatus;
      let str = '';
      if (type == 'text') {
        if (item.verifyError) {
          return '校验失败';
        }
        switch (val) {
          case 0:
            str = '未部署';
            break;
          case 1:
            str = '部署中';
            break; //同步成功
          case 2:
            str = '待部署';
            break;
          case 3:
            str = '部署成功';
            break;
          case 4:
            str = '删除中';
            break; //导入失败
          case 5:
            str = '已修改';
            break;
          case 6:
            str = '部署失败';
            break;
          case 7:
            str = '修改错误';
            break;
          case 8:
            str = '删除失败';
            break;
          case 9:
            str = '部署中 ';
            break;
          case 10:
            str = '未绑定工程';
            break;
          case 11:
            str = '修改失败';
            break;
          case 12:
            str = '待删除';
            break;
          case 13:
            str = '清空部署中';
            break;
          case 14:
            str = '清空部署失败';
            break;
          case 15:
            str = '部署校验中';
            break;
          case 16:
            str = '工程导入中';
            break;
          case 17:
            str = '工程导入失败';
            break;
          case 'init':
            str = '部署已清空';
            break;
          case 'deploying':
            str = '批次部署中';
            break;
          case 'complete':
            str = '批次部署完成';
            break;
          case 'error':
            str = '批次部署错误';
            break;
          case 'queryError':
            str = '部署查询错误';
            break;
          default:
            break;
        }
      } else {
        if (item.verifyError) {
          return '#ff4242';
        }
        switch (val) {
          case 0:
            str = '#888';
            break; //default
          case 1:
            str = '#06b649';
            break; //green
          case 3:
            str = '#06b649';
            break;
          case 4:
            str = '#ff4242';
            break; //red
          case 6:
            str = '#ff4242';
            break;
          case 7:
            str = '#fa9901';
            break;
          case 8:
            str = '#fa9901';
            break;
          case 9:
            str = '#06b649';
            break;
          case 11:
            str = '#fa9901';
            break;
          case 13:
            str = '#ff8244';
            break;
          case 14:
            str = '#ff8244';
            break;
          //case 10:str = 'blue';break;
          case 15:
            str = '#ff8244';
            break;
          case 16:
            str = '#088cf0';
            break;
          case 17:
            str = '#cb0236';
            break;
          case 'init':
            str = '#ff8244';
            break;
          case 'deploying':
            str = '#06b649';
            break;
          case 'complete':
            str = '#06b649';
            break;
          case 'error':
            str = '#fa9901';
            break;
          case 'queryError':
            str = '#fa9901';
            break;
          default:
            str = '#888';
            break;
        }
      }
      return str;
    },
    // 转义演练、竞赛场景进度的状态码为对应的中文和按钮样式
    progressFilter(val, type) {
      let str = '';
      if (type == 'text') {
        switch (val) {
          case 0:
            str = '准备中';
            break;
          case 1:
            str = '准备完毕';
            break;
          case 2:
            str = '进行中';
            break;
          case 3:
            str = '裁判评判阶段';
            break;
          case 4:
            str = '已结束';
            break;
          case 5:
            str = '已暂停';
            break;
          case 6:
            str = '删除中';
            break;
          case 7:
            str = '删除失败';
            break;
          default:
            break;
        }
      } else {
        switch (val) {
          case 0:
            str = 'primary';
            break;
          case 1:
            str = 'primary';
            break;
          case 2:
            str = '#06b649';
            break;
          case 3:
            str = '#06b649';
            break;
          case 5:
            str = '#06b649';
            break;
          case 6:
            str = 'error';
            break;
          case 7:
            str = 'warning';
            break;
          default:
            str = '#888';
            break;
        }
      }
      return str;
    }
  },
  computed: {
    ...mapState('compet', ['hasFile']) // 菜单组建中已经获取了是否需要归档的配置，不需要归档时，不展示归档按钮
  },
  mounted() {},
  beforeDestroy() {},
  methods: {
    // 判断竞赛、演练绑定的工程是否还存在
    available(item) {
      return item.projectId && item.available;
    },
    // 分批部署是否部署失败
    partialDeploymentIsError(item) {
      return ['error', 'init'].includes(item.quickCreateStatus);
    },
    // 判断比赛、演练是否处于删除失败、删除中的状态
    isRemove(item) {
      return [6, 7].includes(item.progress);
    },
    // 计算出结束时间24小时后的销毁时间
    destoryTime(item) {
      return new Date(item.endTime).getTime() + 24 * 60 * 60 * 1000;
    },
    // 修改竞赛、演练，调用父组件方法，展示修改模态框，修改操作在父组件中实现
    modifyItem(item) {
      this.$parent.showAddAndUpdate(item);
    },
    // 调用父组件方法，删除演练、竞赛场景
    deleteItem(item) {
      this.$parent.delSceneTip(item);
    },
    // 调用父组件方法，获取按钮状态是否需要禁用
    setBtnStatus(item, type) {
      return this.$parent.setReBtnStatus(item, type);
    },
    // 调用父组件方法，进入详情页
    toDetailPage(item) {
      let extension;
      try {
        extension = JSON.parse(item.extension);
      } catch (e) {
        extension = {};
      }
      const deploymentType = extension.deploymentType;
      if (![2, 4].includes(item.progress)) {
        // 非结束、进行中的状态，需要看工程状态判断能不能进入场景详情页
        if (
          item.deployStatus != 3 || // 部署成功允许进入，部署清空后处于未部署状态，也允许进入
          (deploymentType && ['error', 'deploying', 'queryError'].includes(item.quickCreateStatus))
        ) {
          //
          this.$Message.warning('未部署成功不可进入！');
          return;
        }
      }
      if (item.progress == 2) {
        if (
          [0, 1, 2, 9].includes(item.deployStatus) ||
          (deploymentType && item.quickCreateStatus === 'deploying')
        ) {
          this.$Message.warning('工程部署中不可进入！');
          return;
        }
      }
      if (!item.startTime || !item.endTime) {
        if (this.setBtnStatus(item, 'modify')) {
          this.$Message.warning('未设置竞赛起止时间不可进入！');
        }
        return;
      }
      if (item.projectId) {
        this.$parent.toDetailPage({ row: item });
      } else {
        this.$Message.warning('工程不存在！');
      }
    },
    // 打开父组件中的快速构建组件，并传入当前选中的列表数据
    quickCreate(item) {
      if ([1, 2, 8, 9].includes(item.type)) {
        this.$parent.$refs.quickCreatModal.openQuickModal({ row: item });
      } else {
        this.$parent.$refs.quickCreatDrillModal.show(item);
      }
    },
    // 跳转至拓扑页面
    gotoTopo(scene) {
      if (scene.projectId && scene.deployStatus != 10) {
        // 10：未绑定工程
        window.open(
          `/14-topologyProject/index.html#/topologyDisplay/topologys?projectId=${scene.projectId}`
        );
      } else {
        this.$Message.warning('工程不存在！');
      }
    }
  },
  destroyed() {}
};
</script>

<style scoped>
.my-tooltip {
  margin-top: -2px;
  margin-right: 2px;
}
.modal-group {
  display: flex;
}
.modal-group > .modal-label {
  height: 32px;
  line-height: 32px;
  margin-right: 12px;
}
.modal-group > .modal-label:before {
  content: '*';
  display: inline-block;
  margin-right: 4px;
  line-height: 1;
  font-family: SimSun;
  font-size: 12px;
  color: #ed4014;
}
.modal-group > .modal-content {
  flex: 1;
}
.modal-group > .modal-content > p {
  color: red;
  font-size: 10px;
  text-align: left;
  margin-top: 4px;
}
.line-left {
  width: 400px;
}
.extra-info {
  display: flex;
  justify-content: flex-end;
}
.extra-info > .extra-item {
  display: flex;
  align-items: center;
}
#drillList {
  max-height: calc(100vh - 60px - 54px - 62px - 40px);
  overflow-y: auto;
}
#drillList >>> .ivu-card {
  position: unset;
}
.ml20 {
  margin-left: 20px;
}
.pd0 {
  padding: 0px;
}
.item {
  border: 2px solid #e7e7f1;
  margin-bottom: 15px;
  font-weight: bold;
}
#drillList /deep/ .ivu-card-body {
  padding: 10px 15px;
}
.item-fist-line {
  display: flex;
  justify-content: space-between;
}
.line-right {
  display: flex;
  color: #a4a3c4;
  height: 30px;
}
.line-right .action {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.item-infos {
  /*display: flex;*/
  margin-top: 6px;
  /*height:20px;*/
}
.info {
  display: inline-block;
  margin-right: 20px;
  color: #a4a3c4;
}
.info .value {
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  white-space: nowrap;
  text-overflow: ellipsis;
}
li.info:after {
  display: none;
}
.tableTooltip {
  /*width:100%;*/
  vertical-align: top;
  line-height: 21px;
  height: 21px;
}
.tooltipContent {
  white-space: normal;
  word-break: break-all;
}
.showContent {
  max-width: 200px;
  white-space: nowrap;
  word-break: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}
.action button.ive-btn-text {
  border: none;
  background: none;
  outline: none;
}
*[disabled] {
  cursor: not-allowed;
}
.extra-item {
  display: inline-block;
}
.noStyle {
  background: none;
  border: none;
  box-shadow: none;
  outline: none;
}
.course-name {
  color: #1563C2 ;
}
</style>
<style>
#drillList .ivu-progress-inner {
  background-color: #bbb !important;
}
</style>
